<template>
  <div class="search-container">
    <!-- 搜索栏 -->
    <!--
      Tips: 在 van-search 外层增加 form 标签，且 action 不为空，即可在 iOS 输入法中显示搜索按钮
     -->

    <van-row class="top">
      <van-col span="4">
        <van-dropdown-menu>

          <van-dropdown-item v-model="value" :options="option2"/>
        </van-dropdown-menu>

      </van-col>

      <van-col span="20">
        <form action="/">
          <van-search
              v-model="searchText"
              show-action
              placeholder="请输入搜索关键词"

              @search="onSearch(searchText)"
              @cancel="onCancel"
              @focus="isResultShow=false"
          />
        </form>
      </van-col>

    </van-row>

    <!-- /搜索栏 -->

    <!-- 搜索结果 -->
    <search-result v-if="isResultShow"
                   :searchText="searchText"
                   :selecttype="value"
                   class="search-result"/>
    <!-- /搜索结果 -->

 


  </div>
</template>

<script>

import SearchResult from './components/search-result'
import {getItem, setItem} from '@/utils/storage'
import {getUserSearcHistories} from '@/api/search'

export default {
  name: 'SearchIndex',
  components: {
  
    SearchResult
  },
  props: {},
  data() {
    return {
      searchText: '',//搜索输入框内容
      isResultShow: true,//控制搜索接口的显示状态
      searchHistories: getItem('search-histories') || [],
      value: '题名',//下拉框
      option2: [
        {text: '题名', value: '题名'},
        {text: '主题', value: '主题'},
        {text: '作者', value: '作者'},
      ],

    }
  },
  computed: {},
  watch: {},
  async created() {
    // const { data }=await getUserSearcHistories();
    // console.log(data)
  },
  mounted() {
  },
  methods: {
    onSearch(val) {
      this.isResultShow = true
      this.searchText = val
      // 存储搜索历史记录
      // 要求：不要有重复历史记录、最新的排在最前面
      const index = this.searchHistories.indexOf(val)
      if (index !== -1) {
        this.searchHistories.splice(index, 1)
      }
      this.searchHistories.unshift(val)
      setItem('search-histories', this.searchHistories)

    },
    UpdateHistories(val) {
      this.searchHistories = val;
      setItem('search-histories', this.searchHistories)
    },
    onCancel() {
      this.$router.back()
    }
  }
}
</script>

<style scoped lang="less">
.top {
  line-height: 69px;
  height: 69px;
}

.top .div {
  line-height: 69px;
  height: 69px;
}

.search-container {
  .van-search__action {

  }
}

.search-result {
  position: fixed;
  left: 0;
  right: 0;
  top: 54px;
  bottom: 0;
  overflow-y: auto;
}

/deep/ .van-nav-bar__title {
  max-width: none;
}

.van-search {

  padding: 0.19167rem 0.32rem;

}
</style>